<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getHallListApi, delHallApi } from '@/service/shop.js'; // 假设你有一个获取门店列表的API
import CommonPagination from '@/components/pagination.vue'; // 分页
// 组件
import HallAdd from './components/hall-add.vue'; // 添加
import HallEdit from './components/hall-edit.vue'; // 编辑

const pagination = ref({
    page: 1,
    limit: 15,
    total: 0,
});

const query = ref({
    keyword: '', // 搜索关键字
    status: '', // 状态 
})

const tableData = ref([]); // 表格数据

// 获取门店列表
const fetchShopList = async () => {
    let params = { ...query.value, pagination: pagination.value }; // 合并查询参数和分页参数 
    try {
        const response = await getHallListApi(params); // 调用API获取门店列表
        if (response.code === 200) {
            tableData.value = response.data.list; // 填充表格数据
            pagination.value = response.data.pagination; // 更新总记录数  
        }
    } catch (error) {
        ElMessage.error('获取门店列表失败，请稍后重试'); 
    }
}

// 搜索
const handleSearch = () => {
    pagination.value.page = 1; // 重置页码为1
    fetchShopList(); // 重新获取门店列表
}

// 重置
const resetForm = () => {
    query.value = {
        keyword: '', // 重置搜索关键字
        status: '', // 重置状态 
    }  
}

// 编辑
const editStore = (row) => {
    // 打开编辑抽屉，并传入当前行数据
    if (editStoreRef.value) {
        editStoreRef.value.openDrawer(row); // 调用子组件的方法打开抽屉
    }
}

// 删除
const deleteStore = async (row) => {
    try {
        await ElMessageBox.confirm('确定要删除该厅吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }); 

        try {
            const response = await delHallApi(row.id); // 调用API删除门店
            if (response.code === 200) {
                ElMessage.success('厅删除成功');
                fetchShopList(); // 重新加载列表  
            } else {
                ElMessage.error(response.msg); // 显示错误消息
            }
        } catch (error) {
            ElMessage.error('删除失败，请稍后重试'); // 网络错误
        }
    } catch (error) {
        // 用户取消操作
        ElMessage.info('取消删除'); 
    }
}

onMounted(() => {
    fetchShopList(); // 页面加载时获取门店列表 
})

</script>

<template>
    <el-main>
        <div class="toolbar">
            <el-form inline>
                <el-form-item>
                     <el-button type="primary" @click="showAddHallView">添加厅</el-button>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="query.status" placeholder="请选择状态">
                        <el-option label="启用" value="1" />
                        <el-option label="禁用" value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="请输入厅名称" @keyup.enter="handleSearch" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button type="text" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="title" label="厅名称" width="180" />
            <el-table-column prop="address" label="地址" width="200" />
            <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
                    {{ scope.row.status === 1 ? '启用' : '禁用'         }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-button type="text" @click="show(scope.row)">编辑</el-button>
                    <el-button type="text" @click="deleteStore(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
             <CommonPagination :pagination="pagination" @fetch-list="fetchShopList"/>
        </div>
    </el-main>
</template>